import React, { Component } from 'react';
import { Modal, Form, message, Radio, Select, Card, Tree } from 'antd';
const { TreeNode } = Tree;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { Option } = Select;

export default class OneKeyPubLishApply extends Component {
  state = {
    progId: '',
  };
  onSelect = selectKeys => {
    //console.log('selectkeys', selectKeys);
    this.setState({ progId: selectKeys });
  };
  handleSet = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        const { pubScope, cityId, pubMod, authUserName } = values;
        const { progId } = this.state;

        dispatch({
          type: 'dev/oneKeyPubApply',
          payload: { pubScope, cityId, pubMod, progId, authUserName },
          callback: () => {
            message.success('设置一键发布成功.');
          },
        });

        this.props.handleModalVisible(false, 'oneKeyPubLish');
      }
    });
  };

  render() {
    const { modalVisible, form, handleModalVisible, program } = this.props;
    let programlist = [];
    //console.log('program', program)
    if (program.list.length) {
      programlist = program.list.filter(item => item.progAuditStatus === 1);
    }
    return (
      <Modal
        title="一键发布"
        visible={modalVisible}
        onOk={this.handleSet}
        onCancel={() => handleModalVisible(false, 'oneKeyPubLish')}
      >
        <Form>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择范围">
            {form.getFieldDecorator('pubScope', {
              initialValue: 0,
            })(
              <RadioGroup>
                <Radio value={0}>绑定设备</Radio>
                <Radio value={1}>所有设备</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择模式">
            {form.getFieldDecorator('pubMod', {
              initialValue: 0,
            })(
              <RadioGroup>
                <Radio value={0}>批量发布</Radio>
                <Radio value={1}>智能发布</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择城市">
            {form.getFieldDecorator('cityId', {
              rules: [{ required: true, message: '请选择城市...' }],
            })(
              <Select allowClear="true" placeholder="请选择" style={{ width: '100%' }}>
                {this.props.city.map(item => (
                  <Option value={item.code} key={item.code}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择授权用户">
            {form.getFieldDecorator('authUserName', {
              rules: [{ required: true, message: '请选择授权用户...' }],
            })(
              <Select allowClear="true" placeholder="请选择" style={{ width: '100%' }}>
                {this.props.userCodes.map(item => (
                  <Option value={item.code} key={item.code}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
          <Card title="审核节目列表（单选）" bodyStyle={{ height: 600, overflow: 'scroll' }}>
            {programlist.length ? (
              <Tree style={{ height: 600 }} onSelect={this.onSelect}>
                {programlist.map(data => (
                  <TreeNode title={data.progName} key={data.progId} />
                ))}
              </Tree>
            ) : (
              'loading tree'
            )}
          </Card>
        </Form>
      </Modal>
    );
  }
}
